<template>
    <div class="container">
        <div class="wrap-container" :style="{'height': wrapHeight + 'px'}">
            <div class="wrap" ref="ball" @touchstart="ontouchstart"></div>
        </div>
    </div>
</template>
<style scoped>
    .wrap-container {
        width: 750px;
        align-items: center;
        justify-content: center;
    }

    .wrap {
        width: 200px;
        height: 200px;
        border-radius: 100px;
        background-color: black;
    }

</style>
<script>
    import {
        Utils
    } from "weex-ui";
    export default {
        data() {
            return {
                wrapHeight: 1334,
                x: 0,
                y: 0,
                isInAnimation: false,
                opacity: 1,
                gesToken: 0
            }
        },
        created() {
            this.wrapHeight = Utils.env.getPageHeight();
            this.$navigator.setLeftItem({
                text: '返回', // 展示的文字 (和图片 二选一)    
                textColor: '', // 文字颜色 (默认为白色)
                fontSize: '32', // 字号（默认32px）
                fontWeight: 'normal', // 是否加粗（默认不加粗）
                image: '' // 展示的图片url (和文字 二选一，文字优先级更高)
            }, () => {
                // 点击回调
                this.$router.back({
                    type:'PUSH'
                })
            })
        },
        mounted() {
            this.onOrientation();
        },
        methods: {
            onOrientation(){
                var vm = this;
                let ballRef = vm.$refs.ball.ref;
                let orientationObj = vm.$bindingx.bind({
                    eventType: 'orientation',
                    props: [
                        {
                            element: ballRef,
                            property:'transform.translateX',
                            expression: 'x*3+0'
                        },
                        {
                            element: ballRef,
                            property:'transform.translateY',
                            expression:'y*4+0'
                        }
                    ]
                })
            },
            ontouchstart(event) {
                var vm = this;
                // 如果正在执行动画，则不触发
                if (vm.isInAnimation) return
                // 解绑动画
                if (vm.gesToken != 0) {
                    vm.$bindingx.unbind({
                        eventType: 'pan',
                        token: vm.gesToken
                    })
                    vm.gesToken = 0;
                    return;
                }

                let ballRef = vm.$refs.ball.ref;
                let gesTokenObj = vm.$bindingx.bind({
                    anchor: ballRef,
                    eventType: 'pan',
                    props: [{
                            element: ballRef,
                            property: 'transform.translateX',
                            expression: 'x+0'
                        },
                        {
                            element: ballRef,
                            property: 'opacity',
                            expression: '1-abs(x)/600'
                        }
                    ]
                }, (e) => {
                    if (e.state === 'end') {
                        vm.x += e.deltaX;
                        vm.opacity = 1 - Math.abs(e.deltaX) / 600;
                        vm.bindTiming()
                    }
                })
                vm.gesToken = gesTokenObj.token;
            },
            dismissCallback() {
                var vm = this;
                vm.$notice.toast({
                    message: '小球消失'
                })
            },
            bindTiming() {
                var vm = this;
                vm.isInAnimation = false;
                let ballRef = vm.$refs.ball.ref;
                let changed_x, final_x, final_opacity, translate_x_origin;
                let shouldDismiss = false;

                if (vm.x >= -750 / 2 && vm.x <= 750 / 2) {
                    shouldDismiss = false;
                    final_x = 0;
                    changed_x = 0 - vm.x;
                    final_opacity = 1;
                    translate_x_origin = `easeOutElastic(t,${vm.x},${changed_x},1000)`
                } else if (vm.x < -750 / 2) {
                    shouldDismiss = true;
                    final_x = -750;
                    changed_x = -750 - vm.x;
                    final_opacity = 0;
                    translate_x_origin = `easeOutExpo(t,${vm.x},${changed_x},1000)`
                } else {
                    shouldDismiss = true;
                    final_x = 750;
                    changed_x = 750 - vm.x;
                    final_opacity = 0;
                    translate_x_origin = `easeOutExpo(t,${vm.x},${changed_x},1000)`
                }

                let opacity_origin = `linear(t,${vm.opacity},${final_opacity - vm.opacity},1000)`;
                let result = vm.$bindingx.bind({
                    eventType: 'timing',
                    exitExpression: 't>1000',
                    props: [{
                            element: ballRef,
                            property: 'transform.translateX',
                            expression: translate_x_origin
                        },
                        {
                            element: ballRef,
                            property: 'opacity',
                            expression: opacity_origin
                        }
                    ]
                }, (e) => {
                    if (e.state === 'end' || e.state === 'exit') {
                        vm.x = final_x;
                        vm.opacity = final_opacity;
                        vm.isInAnimation = false;
                        shouldDismiss && vm.dismissCallback()
                    }
                })
            }
        }
    }

</script>
